---
title: "07-vue 入门"
created: 2025-11-25
tags:
- 项目筑基
---
# vue 入门
> 从三件套到框架：组件思想、声明式编码、虚拟 dom，用尚硅谷的开头两节把插值语法和指令语法跑通，vue 实例与容器是"一夫一妻制"。
## 为什么是 vue
以组件的形式进行编写前端代码
![[vue-image1.png]]
页面中的每一个模块都是一个 .vue 文件
所谓复用率 就是当一个新页面也需要某个块的时候 只需要引入对应的 .vue 文件即可
而更好维护也是同理 只需要修改 .vue 里的东西 就可以全部进行更改
（很符合封装的思想 把一个一个功能封装起来 要用的时候调用即可 更改也方便）
对于数据 它采用声明式编码
比如这个 要把数据变成 ul 里面的 li
![[vue-image2.png]]
用 js 势必要写成：
一行代码都不能少 命令式地往下执行
![[vue-image3.png]]
而 vue 采用声明式
用 v-for 去遍历（其实就是内部写好了 调用接口）
![[vue-image4.png]]
### 虚拟 dom + diff 算法
对于一些更新的数据 原始做法是不管三七二十一 直接重新执行一遍 dom 去做覆盖
![[vue-image5.png]]
这样的话 如果只是添加了某条记录 就要做很多无用功
vue 采用中间加上一层虚拟 dom
使用 diff 算法 在这层虚拟 dom 里进行比对 再去变成真实的页面 dom
![[vue-image6.png]]
说白了其实就是把它把很多东西都做了一个封装 以类似函数调用的形式进行编程
然后同时也提供了很多库函数 （对于一些常用的功能它写好了 而且写的比你好 你要会调用接口） 其实本质也就是封装函数
准备工作：下载 vue、vue 开发者工具插件、vscode 中的 liveserver 插件
## hello,?（插值语法）
首先以一个最简单的例子来对这样的模版化的东西做个了解
hello，world 这个 world 可以换成其他东西 由后端传入
就可以写成
```html
hello, {{ name }}
```
在 {{}} 中的东西就是被传入的可变化的东西
当然 这需要先 new 一个 Vue 对象
```html
```
当然再前提是要引入 vue.js 文件
```html
```
el 指的就是找到 id：root 的标签
data 是以类的形式去写的 这样可以提高拓展性
![[vue-image7.png]]
![[vue-image8.png]]
完整的一个 hello 案例：
```html
第一次使用vue
hello, {{ name }}
{{name.toUpperCase()}},{{address}} {{1+1}} {{Date.now()}}
```
知识点小结：
1. 想让 Vue 工作，就必须创建一个 Vue 实例，且要传入一个配置对象；
2. root 容器里的代码依然符合 html 规范，只不过混入了一些特殊的 Vue 语法；
3. root 容器里的代码被称为【Vue 模板】；
4. Vue 实例和容器是一一对应的；
5. 真实开发中只有一个 Vue 实例，并且会配合着组件一起使用；
6. {{xxx}} 中的 xxx 要写 js 表达式，且 xxx 可以自动读取到 data 中的所有属性；
7. 一旦 data 中的数据发生改变，那么页面中用到该数据的地方也会自动更新。
### 工作流程
先有的容器（带着标签的 div 等）再有的 Vue 实例
当 Vue 实例开始工作的时候 发现 el 中的配置（指定的选择器）
找到那个容器
于是把整个容器拿过来解析 检查有没有自己设计的一些语法（data 中的关键字）
在容器中找到了"{{name}}"回到 data 里找到 name
然后把 data 中 name 的值全部替换掉容器里的 {{name}}
**模板 -> 解析 -> 全新 div**
### 一夫一妻制
然后注意的一点是容器与实例是一对一的
想一个标签用多个 vue 去管理或者多个标签用同一个 vue 管理都是不行的
**一夫一妻制**
如果以后东西多了 这个 hello，world 里有 100 个数据是动态的
就意味着 data 里面也要写 100 行东西 这就显得很庞大 因为这种一夫一妻的制度
确实只能这样 一个容器用一个实例对应 但是 实例是可以拆解的
可以把它拆成多个部分 40 条给第一部分管理 20 条给第二部分……
这样的各个部分其实就是"组件"的思想
## 跳转 url（指令语法）
对于标签里面的内容可以这样随意替换成其他内容 （用插值语法）
那如果是一个 a 标签中的 url 呢
想让它也不是写死的 能变化该怎么办
也是一样写法吗
```html
```
```js
new Vue({
el: "#root",
data: {
url: 'https://www.baidu.com',
}
})
```
貌似不太行
![[vue-image9.png]]
其实可以发现这完全不一样
之前的插值语法针对的对象是 div 等标签里面的元素
而这里的 url 是标签的一个属性
都不是同一个东西
所以这里要用另一种方法——**指令语法**
在 href 前使用 v-bind 属性 表示后面的 url 里面的东西都被当成 js 语句执行
```html
```
可以惊奇的发现 url 被替换成了 data 中 url 里面的东西
![[vue-image10.png]]
然后这个 v-bind: 是可以缩写的 缩写成 :
那么可以写成：`这是一个超链接`
也就是在正常写法中 在 href 前加个 : 然后原本填入的真实 url 用一个字符串代替 改写到 vue 实例中 由后端传入
### 模板语法两大类
Vue 模板语法有 2 大类：
**1. 插值语法：**
- 功能：用于解析标签体内容。
- 写法：{{xxx}}，xxx 是 js 表达式，且可以直接读取到 data 中的所有属性。
**2. 指令语法：**
- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
- 举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx 同样要写 js 表达式，且可以直接读取到 data 中的所有属性。
- 备注：Vue 中有很多的指令，且形式都是：v-????，此处我们只是拿 v-bind 举个例子。
完整示例：
```html
模板语法
```
## 附件
- [[vue.docx|vue.docx]]
---
⬅️ [[06-入门小项目|06-入门小项目]] 🏠 [[00-前端与可视化|00-前端与可视化]] ➡️ [[08-关于svg|08-关于svg]]